<template>
  <div class="jmact-barrage" :style="{height: height+'px'}">
    <div class="dmGroup" v-for="(item,index) in listArr" :key="index"
      :style="{top:item.top,animationName:'dmAnimation',animationDuration:item.time + 's',animationTimingFunction:'linear',animationDelay:index*3+'s',animationIterationCount:'infinite',animationPlayState:'running'}">
      <div class="dmItem">
        <div class="dm">
          <div class="avatarBox">
            <img :src="item.image" class="avatar" />
          </div>
          <span class="content">{{ item.userName }}{{item.gap==0?'拼团成功':'参加成功'}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref
  } from 'vue';

  export default defineComponent({
    name: 'barrageArea',
    props: {
      msg: String,
      list: Array
    },
    setup(props) {
      let listArr = ref([])
      let height = ref(200)
      onMounted(() => {
        var dom = document.querySelector('.jmact-swiper')
        height.value = (dom as HTMLBaseElement).offsetHeight
        listArr.value = getListArr((props as any).list, height.value)
      })

      function getListArr(list = [], height = 200) {
        let listArr = [];
        list.map((item, index) => {
          const time = Math.floor(Math.random() * 10)
          const _time = time < 6 ? 6 + index : time + index
          const second = Math.floor(Math.random() * 60)
          const top = Math.floor(Math.random() * height * .8) + 'px' 
          const obj = {
            ...item,
            top,
            second,
            time: _time
          }
          listArr.push(obj)
        })
        return listArr
      }
      return {
        listArr,
        height
      }
    }
  })
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  @keyframes dmAnimation {
    from {
      left: 100%;
    }

    to {
      left: -100%;
    }
  }
</style>
<style scoped lang="scss">
  .jmact-barrage {
    width: 100%;
    height: 200px;
    position: absolute;
    background: transparent;
    z-index: 2;
    overflow: hidden;
    .dmGroup {
      position: absolute;
      top: 70px;
      left: 100%;
      z-index: 10;
      animation-timing-function: linear;
      animation-fill-mode: none;
      transform: translateZ(0);
      white-space: nowrap;
      height: 30px;
      animation: dmAnimation 5s linear 2s infinite alternate;
    }

    .dmItem {
      display: inline-flex;
      margin-right: 30px;
      white-space: nowrap;

      .dm {
        display: inline-flex;
        vertical-align: middle;
        align-items: center;
        position: relative;
        height: 25px;
        line-height: 25px;
        padding: 0 7.5px 0 2.5px;
        background: rgba(0, 2, 2, 0.28);
        border-radius: 12.5px;
        overflow: hidden;
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
      }

      .avatarBox {
        display: inline-block;
        position: relative;
        width: 20px;
        height: 20px;
        margin-right: 5px;

        .avatar {
          width: 20px;
          height: 20px;
          border: 0;
          border-radius: 50%;
          overflow: hidden;
        }
      }

      .content {
        display: inline-block;
        max-width: 250px;
        height: 25px;
        line-height: 25px;
        margin-right: 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
</style>